<template>
    <div class="y-table-filter">
        <div 
            v-for="(item,index) in options"
            :key="index"
            class="y-table-filter-item"
            >
            <!-- 输入框 -->
            <el-input
                v-if="item.type == 'input'"
                v-model="filterData[item.field]"
                clearable
                size="small"
                auto-complete	
                :placeholder="item.placeholder"
                @keydown.enter.native="_search"
            >
            </el-input>
            <!-- 下拉框 -->
            <template v-if="item.type == 'select'">
                <el-select v-model="filterData[item.field]" filterable :placeholder="item.placeholder" size="small" clearable>
                    <el-option
                    v-for="item1 in item.options"
                    :key="item1.value"
                    :label="item1.label"
                    :value="item1.value">
                    </el-option>
                </el-select>
            </template>
            <!-- <y-select v-if="item.type == 'select'"  v-bind="item"></y-select> -->
            <!-- 多选 -->
            <y-select-multiple v-if="item.type == 'select-multiple'"  v-bind="item"></y-select-multiple>
            <!-- 日期 -->
            <y-date v-if="item.type == 'date'"  v-bind="item"></y-date>
            <!-- 日期范围 -->
            <y-date-range v-if="item.type == 'date-range'" v-bind="item"></y-date-range>
        </div>
        <div class="y-table-filter-item">
            <y-button icon="search" tips @click="_search"></y-button>
        </div>
    </div>
</template>

<script>
export default {
    name:'y-table-filter',
    props:{
        options:Array
    },
    data(){
        return {
            filterData:{},
            value:''
        }
    },
    created(){
        var _this = this
        var filterData = {}
        _this.options.forEach(op=>
        {
            switch(op.type){
                case 'input':
                    filterData[op.field] = ''
                    break;
            }
        });
        _this.filterData = filterData
    },
    methods:{
        _search(){
            this.$emit('search',this.filterData)
        }
    }
}
</script>


<style lang="scss" scoped>
.y-table-filter{
    display: inline-block;
    .y-table-filter-item{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 10px;
        &:last-child{
            margin-right: 0;
        }
    }
}
</style>